<template>
	<view class="container">
		<view class="item">
			<text class="text">支付宝姓名</text>
			<input class="input" type="text" placeholder="请输入支付宝认证的姓名" v-model="name" @input="inputname" />
		</view>
		<view class="item">
			<view class="text" style="margin-right: 20rpx;">选择账号类型</view>
			<view style="color:#666666;">
				<u-radio-group v-model="value">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled" active-color="#F0812D">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="item" v-if="value=='邮箱'">
			<text class="text">支付宝账号</text>
			<input class="input" type="text" placeholder="请输入支付宝认证的邮箱" v-model="emial" @input="inputemial" />
		</view>
		<view class="item" v-if="value=='手机号'">
			<text class="text">支付宝账号</text>
			<input class="input" type="number" placeholder="请输入支付宝认证的手机号" v-model="phone" @input="inputphone" />
		</view>
		<view class="item" v-if="value=='手机号'">
			<text class="text">登录密码</text>
			<input class="input " type="password" placeholder="请输入VS登录密码" v-model="codema" @input="inputcodema" />
			<!-- <text class="getma" @click="getma">{{ma}}</text> -->
		</view>
		<view class="item" v-if="value=='邮箱'">
			<text class="text">登录密码</text>
			<input class="input " type="password" placeholder="请输入VS登录密码" v-model="codema" @input="inputemial" />
			<!-- <text class="getma" @click="getma">{{ma}}</text> -->
		</view>
		<!-- <view class="text1" v-if="value=='手机号'">此验证码为注册VS的手机号接收</view> -->
		<view class="bind" :class="{'bind-after':flag}" @click="bindcard">绑定账号</view>
	</view>
</template>

<script>
	import {
		getsms,
		bindzfb,
		updateUserAli
	} from "../../api/login.js"
	export default {
		data() {
			return {
				mobile: '',
				name: '',
				phone: '',
				codema: '',
				flag: false,
				ma: '获取验证码',
				value: "手机号",
				list: [{
						name: '手机号',
						disabled: false
					},
					{
						name: '邮箱',
						disabled: false
					}
				],
				emial:"",
				type:null
			}
		},
		filters: {
			fliterphone(val) {
				let str = val.substring((val.length - 4), val.length)
				return str
			}
		},
		onLoad(e) {
			this.type=e.type
		},
		methods: {
			radioChange(e) {
				this.value=e
				this.flag = false
				this.name= ""
				this.phone= ""
				this.codema= ""
			},
			inputname() {
				this.inputAll()
			},
			inputphone() {
				this.inputAll()
			},
			inputcodema() {
				this.inputAll()
			},
			inputAll() {
				if (this.name.trim() != "" && this.phone.trim() != "" && this.codema.trim() != "") {
					this.flag = true;
				} else {
					this.flag = false
				}
			},
			inputemial(){
				if (this.name.trim() != ""&& this.emial.trim() != ""&& this.codema.trim() != ""){
					this.flag = true;
				} else {
					this.flag = false
				}
			},
			async bindcard() {
				if (this.name.trim() == "" ) {
					this.msg("姓名未填写", "none")
					return
				}
				if (this.phone.trim() == ""&&this.value=='手机号') {
					this.msg("手机号未填写", "none")
					return
				}
				if (this.codema.trim() == "" &&this.value=='手机号') {
					this.msg("验证码未填写", "none")
					return
				}
				if (this.emial.trim() == "" &&this.value=='邮箱') {
					this.msg("邮箱未填写", "none")
					return
				}
				if(this.emial.trim()!= "" &&this.value=='邮箱'){
					if(!this.$u.test.email(this.emial)){
						this.msg("邮箱格式不对", "none")
						return
					}
				}
				
				let data={}
				if(this.value=='手机号'){
					data={aliName: this.name,
					aliAccount: this.phone,
					password: this.codema,
					type:1
					}
				}else{
					data={aliName: this.name,
					aliAccount: this.emial,
					password: this.codema,
					type:2
					}
				}
				if(this.type==0){
					let res = await this.post(bindzfb,data)
					this.msg('绑定成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}else if(this.type==1){
					let res = await this.post(updateUserAli,data)
					this.msg('绑定成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}
				
				
			},
			//获取验证码
			async getma() {
				if (this.ma == "获取验证码") {
					if (this.$u.test.mobile(this.phone)) {
						let res = await this.get(getsms, {
							mobile: uni.getStorageSync('userInfo').phone
						})
						this.msg("验证码发送成功")
						if (this.ma == "获取验证码") {
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.ma = "获取验证码"
								} else {
									this.ma = time + "s后获取";
									time--
								}
							}, 1000);
						}
					} else {
						this.msg("手机号未填写或格式不对", "none")
					}
				} else {
					this.msg("稍后重试", "none")
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 50rpx 30rpx 0;
	}

	.item {
		width: 690rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #D5D5D5;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
	}

	.text {
		font-size: 28rpx;
		font-weight: 300;
		color: #333333;
	}

	.input {
		padding-left: 46rpx;
		font-size: 28rpx;
		font-weight: 300;
		color: #CACACA;
		width: 340rpx;
	}

	.input_ma {
		padding-left: 102rpx;
	}

	.getma {
		position: fixed;
		right: 30rpx;
		font-size: 28rpx;
		font-weight: 300;
		color: #F0812D;
	}

	.text1 {
		margin-top: 20rpx;
		font-size: 22rpx;
		font-weight: 300;
		color: #666666;
	}

	.bind {
		width: 460rpx;
		height: 88rpx;
		background: #F0812D;
		opacity: 0.3;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: 70rpx auto;
	}

	.bind-after {
		background: #F0812D;
		opacity: 1;
	}
</style>
